<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div id="div1">{{student.teacher.name}}</div>
		
		<input id="btn1" type="button" value="查询饼图" v-on:click="cake" />
		
		<div id="container" style="height: 500px"></div>
	</body>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
	<script type="text/javascript" src="js/ajax.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
	<script>
	
		var cr =new Vue({
			el:"#container",
		});
	
		new Vue({
			el:'#btn1',
			methods:{
				cake:function(){
					
					//1 发送ajax请求
					var url='http://localhost:8080/attendance-service/class/find.do?method=cake';
					
					send(url,null,function(datas){
						var dataCake=datas.data;
					
						var option = {
							  tooltip: {
								trigger: 'item'
							  },
							  legend: {
								top: '5%',
								left: 'center'
							  },
							  series: [
								{
								  name: 'Access From',
								  type: 'pie',
								  radius: ['40%', '70%'],
								  avoidLabelOverlap: false,
								  itemStyle: {
									borderRadius: 10,
									borderColor: '#fff',
									borderWidth: 2
								  },
								  label: {
									show: false,
									position: 'center'
								  },
								  emphasis: {
									label: {
									  show: true,
									  fontSize: '40',
									  fontWeight: 'bold'
									}
								  },
								  labelLine: {
									show: false
								  },
								  data: [
								  ]
								}
							  ]
							};
					
					
					
						//{ value: 1048, name: 'Search Engine' }
						for(var index=0;index<dataCake.length;index++){
							var cakeDTO=dataCake[index];
							var userName=cakeDTO.userName;
							var counter= cakeDTO.counter;
					
							var cake={};
							cake.value=counter;
							cake.name=userName;
							option.series[0].data.push(cake);
							//var xx = option.series[0].data;
						}
					
						var dom =cr.$el;
						//var dom = document.getElementById("container");
					    var myChart = echarts.init(dom);
					
					    if (option && typeof option === 'object') {
					        myChart.setOption(option);
					    }
					});
				}
			}
		});
	
		var demo1= new Vue({
			el:"#div1",
			data:{
				student:{
					name:'海燕',
					age:22,
					teacher:{
						id:10010,
						name:'黄老师'
					}
				}
			}
		});
		//demo1.student.teacher.name='冷老师';
	</script>
	
</html>
